<template>
  <div class="table-page flex-col">
    <div class="round-14 bgfff p-20 px-50 flex flex-a-c flex-j-a mb-20 pb-40">
      <div class="flex-col-center pt-20">
        <span class="mb-6 textccc">打款任务（个）</span>
        <span class="font-bold text-size-24">{{ amount.taskCount }}</span>
      </div>
      <div class="h-full mt-20" style="width: 2px; background: #e8e8e8"></div>
      <div class="flex-col-center">
        <span class="mb-6 textccc">打款用户数（人）</span>
        <div class="flex flex-a-c font-bold text-size-24">
          <div class="m-relative">
            <span>{{ amount.totalCount }}</span>
            <span class="m-absolute position-center-x text-size-14 nowrap" style="bottom: -20px">总</span>
          </div>
          <span class="mx-14 textccc">/</span>
          <div class="m-relative" style="color: #43cf7c">
            <span>{{ amount.successCount }}</span>
            <span class="m-absolute position-center-x text-size-14 nowrap" style="bottom: -20px">成功</span>
          </div>
          <span class="mx-14 textccc">/</span>
          <div class="m-relative" style="color: red">
            <span>{{ amount.failCount }}</span>
            <span class="m-absolute position-center-x text-size-14 nowrap" style="bottom: -20px">失败</span>
          </div>
          <span class="mx-14 textccc">/</span>
          <div class="m-relative" style="color: #ff7d00">
            <span>{{ amount.refundCount }}</span>
            <span class="m-absolute position-center-x text-size-14 nowrap" style="bottom: -20px">退款</span>
          </div>
        </div>
      </div>
      <div class="h-full mt-20" style="width: 2px; background: #e8e8e8"></div>
      <div class="flex-col-center">
        <span class="mb-6 textccc">打款金额（元）</span>
        <div class="flex flex-a-c font-bold text-size-24">
          <div class="m-relative">
            <span>￥{{ amount.totalAmount }}</span>
            <span class="m-absolute position-center-x text-size-14 nowrap" style="bottom: -20px">总</span>
          </div>
          <span class="mx-14 textccc">/</span>
          <div class="m-relative" style="color: #43cf7c">
            <span>￥{{ amount.successAmount }}</span>
            <span class="m-absolute position-center-x text-size-14 nowrap" style="bottom: -20px">成功</span>
          </div>
          <span class="mx-14 textccc">/</span>
          <div class="m-relative" style="color: red">
            <span>￥{{ amount.failAmount }}</span>
            <span class="m-absolute position-center-x text-size-14 nowrap" style="bottom: -20px">失败</span>
          </div>
          <span class="mx-14 textccc">/</span>
          <div class="m-relative" style="color: #ff7d00">
            <span>￥{{ amount.refundAmount }}</span>
            <span class="m-absolute position-center-x text-size-14 nowrap" style="bottom: -20px">退款</span>
          </div>
        </div>
      </div>
    </div>
    <div class="round-14 bgfff p-20 flex-1 flex-col">
      <a-form label-align="right" layout="inline" auto-label-width :model="listParams" size="small" class="form my-10">
        <a-form-item field="payAccount" hide-label>
          <a-select
            class="w-40n"
            v-model="listParams.payAccount"
            placeholder="请选择打款方式"
            @change="changeCurrent(1)"
            allow-clear
          >
            <a-option value="" label="全部"></a-option>
            <a-option :value="7" label="福禄"></a-option>
            <a-option :value="9" label="微税邦"></a-option>
            <a-option :value="5" label="好职坊"></a-option>
            <a-option :value="10" label="智鸟"></a-option>
            <a-option :value="11" label="恒善"></a-option>
            <a-option :value="12" label="福禄云启"></a-option>
            <a-option :value="13" label="好职坊仲发"></a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="payType" hide-label>
          <a-select
            class="w-40n"
            v-model="listParams.payType"
            placeholder="请选择收款方式"
            @change="changeCurrent(1)"
            allow-clear
          >
            <a-option value="" label="全部"></a-option>
            <a-option :value="3" label="支付宝"></a-option>
            <a-option :value="4" label="银行卡"></a-option>
          </a-select>
        </a-form-item>
        <!-- <a-form-item field="status" hide-label>
          <a-select v-model="listParams.status" placeholder="请选择任务状态" @change="changeCurrent(1)">
            <a-option :value="1" label="签约中"></a-option>
            <a-option :value="2" label="签约完成"></a-option>
            <a-option :value="3" label="打款中"></a-option>
            <a-option :value="4" label="任务完结"></a-option>
            <a-option :value="20" label="签约失败"></a-option>
            <a-option :value="40" label="打款失败"></a-option>
          </a-select>
        </a-form-item> -->
        <a-form-item field="submitStartAt" hide-label>
          <MsDate
            v-model:start="listParams.submitStartAt"
            v-model:end="listParams.submitStartEnd"
            @dateChange="changeCurrent(1)"
          />
        </a-form-item>
        <a-form-item field="inviteCode" hide-label>
          <a-input
            class="w-40n"
            v-model="listParams.inviteCode"
            placeholder="请输入邀请码"
            @press-enter="changeCurrent(1)"
            allow-clear
          >
          </a-input>
        </a-form-item>
        <a-form-item field="withdrawalNo" hide-label>
          <a-input
            class="w-40n"
            v-model="listParams.withdrawalNo"
            placeholder="请输入单号"
            @press-enter="changeCurrent(1)"
            allow-clear
          >
          </a-input>
        </a-form-item>
        <a-form-item hide-label>
          <a-space>
            <a-button type="primary" size="small" @click="changeCurrent(1)">
              <template #icon>
                <icon-search />
              </template>
              <template #default>查询</template>
            </a-button>
            <a-button size="small" @click="onResetSearch">
              <template #icon>
                <icon-sync />
              </template>
              <template #default>重置</template>
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
      <div class="w-full flex-1 overflower-hidden m-relative">
        <div class="m-absolute t-0 b-0 r-0 l-0 flex" style="background: red">
          <GiTable
            row-key="id"
            id="financeTaskList"
            ref="tt"
            v-model:columns="columns"
            :loading="loading"
            :data="tableData"
            :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
            :pagination="pagination"
            @refresh="getTableData"
          >
            <template #custom-extra>
              <a-button type="primary" size="small" @click="onAdd">
                <template #icon><icon-plus /></template>
                <span>新建任务</span>
              </a-button>
            </template>
            <template #totalCount="{ record }">
              <span class="text-size-14">{{ record.totalCount }}</span>
            </template>
            <template #successCount="{ record }">
              <span class="text-size-14 text-theme cursor-pointer" @click="onDetail(record.id, 4)">{{
                record.successCount
              }}</span>
            </template>
            <template #failCount="{ record }">
              <span class="text-size-14 text-theme cursor-pointer" @click="onDetail(record.id, 40)">{{
                record.failCount
              }}</span>
            </template>
            <template #refundCount="{ record }">
              <span class="text-size-14 text-theme cursor-pointer" @click="onDetail(record.id, 41)">{{
                record.refundCount
              }}</span>
            </template>
            <template #status="{ record }">
              <a-tag
                :color="
                  record.status == 1
                    ? '#165dff'
                    : record.status == 2
                    ? '#7bc616'
                    : record.status == 3
                    ? '#165dff'
                    : record.status == 4
                    ? '#00b42a'
                    : record.status == 20
                    ? '#f53f3f'
                    : record.status == 40
                    ? '#f53f3f'
                    : record.status == 41
                    ? '#b71de8'
                    : '#86909c'
                "
                >{{
                  record.status == 1
                    ? '签约中'
                    : record.status == 2
                    ? '签约完成'
                    : record.status == 3
                    ? '打款中'
                    : record.status == 4
                    ? '任务完结'
                    : record.status == 20
                    ? '签约失败'
                    : record.status == 40
                    ? '打款失败'
                    : record.status == 41
                    ? '退款成功'
                    : '--'
                }}</a-tag
              >
            </template>
            <template #action="{ record }">
              <a-button type="text" size="small" @click="onDo(record.id)" v-if="record.status == 2" :disabled="loading">
                打款
              </a-button>
              <!-- <a-button type="text" size="small" @click="onSettlement(record.id)" v-if="record.isShowSettle == 1">
                结算
              </a-button> -->
              <a-button type="text" size="small" @click="onDetail(record.id)"> 任务详情 </a-button>
            </template>
          </GiTable>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Message, Modal } from '@arco-design/web-vue'
import { usePagination } from '@/hooks'
import { reAssign, deleteEmpty } from '@/utils/common'
import { userPayTaskList, getTaskListStatistics, submitPayTask, settleTask } from '@/apis'
import $bus from '@/utils/bus'
defineOptions({ name: 'financeTaskList' })
const router = useRouter()
const columns = ref([
  {
    title: '任务名称',
    width: 240,
    dataIndex: 'name'
  },
  {
    title: '任务状态',
    width: 110,
    align: 'center',
    slotName: 'status'
  },
  {
    title: '笔数',
    width: 90,
    align: 'center',
    slotName: 'totalCount'
  },
  {
    title: '成功笔数',
    width: 110,
    align: 'center',
    slotName: 'successCount'
  },
  {
    title: '失败笔数',
    width: 110,
    align: 'center',
    slotName: 'failCount'
  },
  {
    title: '退款笔数',
    width: 110,
    align: 'center',
    slotName: 'refundCount'
  },
  {
    title: '总金额',
    width: 110,
    align: 'center',
    dataIndex: 'totalAmount'
  },
  {
    title: '成功金额',
    width: 110,
    align: 'center',
    dataIndex: 'successAmount'
  },
  {
    title: '失败金额',
    width: 110,
    align: 'center',
    dataIndex: 'failAmount'
  },
  {
    title: '退款金额',
    width: 110,
    align: 'center',
    dataIndex: 'refundAmount'
  },
  {
    title: '打款平台',
    width: 110,
    align: 'center',
    dataIndex: 'payAccountName'
  },
  {
    title: '收款方式',
    width: 110,
    align: 'center',
    dataIndex: 'payTypeName'
  },
  {
    title: '操作',
    width: 130,
    align: 'center',
    fixed: 'right',
    slotName: 'action'
  }
])

const loading = ref(false)
const tableData = ref([])
const tt = ref()
const amount = reactive({
  failAmount: 0,
  failCount: 0,
  successAmount: 0,
  successCount: 0,
  taskCount: 0,
  totalAmount: 0,
  totalCount: 0,
  refundAmount: 0,
  refundCount: 0
})
const listParams = reactive({
  payAccount: undefined,
  payType: undefined,
  submitStartAt: undefined,
  submitStartEnd: undefined,
  status: undefined,
  inviteCode: undefined,
  withdrawalNo: undefined,
  page: 1,
  pageSize: 15
})
const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: listParams.pageSize })

const getTaskListStatisticsFun = async () => {
  const res = await getTaskListStatistics()
  reAssign(amount, res.data)
}

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.pageSize = pagination.pageSize
    getTaskListStatisticsFun()
    const res = await userPayTaskList(deleteEmpty(listParams))
    tableData.value = res.data.list
    setTotal(res?.data?.meta?.pagination?.total || 0)
  } finally {
    loading.value = false
  }
}
getTableData()

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

// 重置筛选查询
const onResetSearch = () => {
  listParams.payAccount =
    listParams.payType =
    listParams.submitStartAt =
    listParams.submitStartEnd =
    listParams.status =
    listParams.inviteCode =
    listParams.withdrawalNo =
      undefined
  changeCurrent(1)
}

// 点击新建
const onAdd = () => {
  //   $bus.emit('financeTask')
  router.push({
    name: 'payment'
  })
}

const onDetail = (id, status) => {
  console.log(id)
  router.push({
    name: 'financeTaskDetail',
    query: {
      id,
      status
    }
  })
}
// 提交代发
const onDo = (id) => {
  Modal.warning({
    title: '提示',
    content: '是否确认提交打款申请？',
    hideCancel: false,
    onOk: () => {
      loading.value = true
      submitPayTask({ taskId: id })
        .then(() => {
          Message.success('提交成功')
          getTableData()
        })
        .finally(() => {
          getTableData()
          loading.value = false
        })
    }
  })
}

// 点击结算
const onSettlement = (id) => {
  Modal.warning({
    title: '提示',
    content: '是否确认提交结算申请？',
    hideCancel: false,
    onOk: () => {
      loading.value = true
      settleTask({ taskId: id })
        .then(() => {
          Message.success('操作成功')
          getTableData()
        })
        .finally(() => {
          getTableData()
          loading.value = false
        })
    }
  })
}

onMounted(() => {
  tt.value?.resetcolumns(true)
  $bus.on('financeTaskList', () => {
    changeCurrent(1)
  })
})

onUnmounted(() => {
  $bus.off('financeTaskList')
})
</script>

<style lang="scss" scoped>
.table-page {
  background: transparent;
}
</style>
